<template>
	<view class="contact-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<text class="iconfont icon-fanhui"></text>
			</view>
			<view class="nav-title">预约联系</view>
			<view class="nav-right"></view>
		</view>
		
		<!-- 成功提示区域 -->
		<view class="success-section">
			<image src="/static/images/success_icon.png" class="success-icon"></image>
			<view class="success-title">支付成功</view>
			<view class="success-desc">您已成功购买线下课程</view>
		</view>
		
		<!-- 课程信息 -->
		<view class="course-info">
			<view class="info-title">课程信息</view>
			<view class="info-item">
				<text class="item-label">课程名称：</text>
				<text class="item-value">{{courseInfo.title}}</text>
			</view>
			<view class="info-item">
				<text class="item-label">课程时间：</text>
				<text class="item-value">{{courseInfo.courseTime || '请联系客服预约'}}</text>
			</view>
			<view class="info-item">
				<text class="item-label">授课地点：</text>
				<text class="item-value">{{courseInfo.location || '请联系客服确认'}}</text>
			</view>
			<view class="info-item">
				<text class="item-label">订单编号：</text>
				<text class="item-value">{{orderInfo.orderNo}}</text>
			</view>
		</view>
		
		<!-- 联系电话区域 -->
		<view class="contact-section">
			<view class="contact-title">联系预约</view>
			<view class="contact-desc">请联系以下电话进行具体课程时间预约</view>
			
			<view class="contact-list">
				<view class="contact-item" v-for="(item, index) in contactList" :key="index" @click="callPhone(item.phone)">
					<view class="contact-info">
						<view class="contact-name">{{item.name}}</view>
						<view class="contact-role">{{item.role}}</view>
					</view>
					<view class="phone-number">{{item.phone}}</view>
					<view class="call-btn">
						<text class="iconfont icon-dianhua"></text>
						<text>拨打</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 温馨提示 -->
		<view class="tips-section">
			<view class="tips-title">温馨提示</view>
			<view class="tips-content">
				<view class="tip-item">1. 请在课程开始前至少提前24小时进行预约</view>
				<view class="tip-item">2. 如需改期或取消，请提前48小时联系客服</view>
				<view class="tip-item">3. 上课请携带身份证件，准时到达上课地点</view>
				<view class="tip-item">4. 如有任何疑问，可随时联系课程顾问</view>
			</view>
		</view>
		
		<!-- 底部按钮区域 -->
		<view class="bottom-actions">
			<button class="action-btn primary" @click="goToCourseDetail">查看课程详情</button>
			<button class="action-btn secondary" @click="goToOrderList">查看我的订单</button>
		</view>
	</view>
</template>

<script>
	import { getCourseDetail } from '@/api/store.js';
	import { getOrderDetail } from '@/api/order.js';
	
	export default {
		data() {
			return {
				courseId: 0,
				orderId: 0,
				courseInfo: {
					id: 0,
					title: '暂无课程信息',
					courseTime: '',
					location: ''
				},
				orderInfo: {
					orderNo: '暂无订单信息'
				},
				contactList: [
					{
						name: '客服中心',
						role: '7x24小时服务',
						phone: '400-123-4567'
					}
				]
			}
		},
		onLoad(options) {
			// 获取传入的课程ID和订单ID
			if (options.courseId) {
				this.courseId = options.courseId;
			}
			if (options.orderId) {
				this.orderId = options.orderId;
			}
			
			// 加载课程和订单信息
			this.loadCourseInfo();
			this.loadOrderInfo();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 加载课程信息
			loadCourseInfo() {
				if (!this.courseId) return;
				
				uni.showLoading({
					title: '加载中...'
				});
				
				// 使用实际API获取课程信息
				getCourseDetail(this.courseId).then(res => {
					uni.hideLoading();
					if (res.data) {
						// 根据数据结构获取正确的数据对象
						const productInfo = res.data.productInfo || res.data;
						
						this.courseInfo = {
							id: productInfo.id || 0,
							title: productInfo.storeName || '未命名课程',
							price: productInfo.price || '0.00',
							originalPrice: productInfo.otPrice || '0.00',
							courseTime: productInfo.courseTime || '请联系客服预约',
							location: productInfo.location || '请联系客服确认',
							courseType: productInfo.courseType !== null ? productInfo.courseType : true
						};
					}
				}).catch(err => {
					uni.hideLoading();
					console.error('获取课程详情失败', err);
					uni.showToast({
						title: '获取课程详情失败',
						icon: 'none'
					});
				});
			},
			
			// 加载订单信息
			loadOrderInfo() {
				if (!this.orderId) return;
				
				uni.showLoading({
					title: '加载中...'
				});
				
				// 使用实际API获取订单信息
				getOrderDetail(this.orderId).then(res => {
					uni.hideLoading();
					if (res.data) {
						this.orderInfo = res.data;
					}
				}).catch(err => {
					uni.hideLoading();
					console.error('获取订单详情失败', err);
					
					// 如果获取失败，使用传入的orderId作为订单号
					this.orderInfo = {
						orderNo: this.orderId
					};
				});
			},
			
			// 拨打电话
			callPhone(phone) {
				if (!phone) return;
				
				uni.makePhoneCall({
					phoneNumber: phone,
					success: () => {
						console.log('拨打电话成功');
					},
					fail: (err) => {
						console.log('拨打电话失败', err);
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						});
					}
				});
			},
			
			// 跳转到课程详情
			goToCourseDetail() {
				if (!this.courseId) {
					uni.showToast({
						title: '课程信息不存在',
						icon: 'none'
					});
					return;
				}
				
				uni.navigateTo({
					url: `/pages/course/kechengxiangqiang/kechengxiangqiang?id=${this.courseId}`
				});
			},
			
			// 跳转到我的订单
			goToOrderList() {
				uni.navigateTo({
					url: '/pages/users/order_list/index' // 订单中心页面
				});
			}
		}
	}
</script>

<style lang="scss">
	.contact-container {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-bottom: 140rpx; // 为底部按钮留出空间
	}
	
	.nav-bar {
		display: flex;
		align-items: center;
		height: 88rpx;
		padding: 0 30rpx;
		background-color: #ffffff;
		position: relative;
		
		.nav-left {
			font-size: 40rpx;
			color: #333;
		}
		
		.nav-title {
			flex: 1;
			font-size: 32rpx;
			color: #333;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin: 0 60rpx;
			font-weight: bold;
		}
		
		.nav-right {
			width: 40rpx;
		}
	}
	
	.success-section {
		background-color: #fff;
		padding: 40rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
		
		.success-icon {
			width: 120rpx;
			height: 120rpx;
			margin-bottom: 20rpx;
		}
		
		.success-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #07c160;
			margin-bottom: 10rpx;
		}
		
		.success-desc {
			font-size: 28rpx;
			color: #666;
		}
	}
	
	.course-info {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.info-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			border-left: 6rpx solid #f44336;
			padding-left: 16rpx;
		}
		
		.info-item {
			display: flex;
			margin-bottom: 16rpx;
			
			.item-label {
				width: 160rpx;
				font-size: 28rpx;
				color: #666;
				flex-shrink: 0;
			}
			
			.item-value {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
		}
	}
	
	.contact-section {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.contact-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
			border-left: 6rpx solid #f44336;
			padding-left: 16rpx;
		}
		
		.contact-desc {
			font-size: 26rpx;
			color: #999;
			margin-bottom: 30rpx;
		}
		
		.contact-list {
			.contact-item {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #f0f0f0;
				
				&:last-child {
					border-bottom: none;
				}
				
				.contact-info {
					flex: 1;
					
					.contact-name {
						font-size: 30rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 6rpx;
					}
					
					.contact-role {
						font-size: 24rpx;
						color: #999;
					}
				}
				
				.phone-number {
					font-size: 30rpx;
					color: #666;
					margin-right: 20rpx;
				}
				
				.call-btn {
					width: 120rpx;
					height: 60rpx;
					background-color: #f44336;
					color: #fff;
					border-radius: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					
					.iconfont {
						margin-right: 6rpx;
					}
				}
			}
		}
	}
	
	.tips-section {
		background-color: #fff;
		padding: 30rpx;
		
		.tips-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			border-left: 6rpx solid #f44336;
			padding-left: 16rpx;
		}
		
		.tips-content {
			padding: 20rpx;
			background-color: #f9f9f9;
			border-radius: 12rpx;
			
			.tip-item {
				font-size: 26rpx;
				color: #666;
				line-height: 1.8;
				margin-bottom: 10rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
	
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 20rpx 30rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
		
		.action-btn {
			flex: 1;
			height: 80rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			margin: 0 10rpx;
			
			&.primary {
				background-color: #f44336;
				color: #fff;
			}
			
			&.secondary {
				background-color: #fff;
				color: #f44336;
				border: 1px solid #f44336;
			}
		}
	}
</style>
